<template>
  <NavBar title="药省心"/>
  <div class="page_content">
    <div class="top_bg">
      <div class="search_box">
        <img src="@/assets/home/search.png" alt="" />
        <input
          type="text"
          class="top_search"
          placeholder="请输入药品通用名搜索"
        />
      </div>
      <div class="function_module">
        <!-- banner -->
        <div class="home_banner">
          <img src="@/assets/home/banner.png" alt="" />
        </div>
        <!-- 主要功能 -->
        <div class="main_function">
          <div class="main_item" v-for="fun in mainFunction" :key="fun.id">
            <img :src="fun.url" alt="" />
            <p>{{ fun.title }}</p>
          </div>
        </div>
        <!-- 次要功能 -->
        <div class="minor_function">
          <div class="minor_item" v-for="fun in minorFunction" :key="fun.id">
            <img :src="fun.url" alt="" />
            <p>{{ fun.title }}</p>
          </div>
        </div>
      </div>
      <!-- 热门分类 -->
      <HotCategories/>
      <!-- 24h药店和便民服务点 -->
      <ShopList/>
      <!-- 科普文章 -->
      <ScienceArticle/>
      <!-- 底部说明 -->
      <PageFooter/>
    </div>
  </div>
  <TabBar/>
</template>

<script>
import NavBar from '@/components/NavBar'
import HotCategories from '@/views/home/hotCategories/HotCategories'
import ScienceArticle from '@/views/home/scienceArticle/ScienceArticle'
import TabBar from '@/components/TabBar'
import PageFooter from '@/components/PageFooter'
import ShopList from '@/views/home/shopList/ShopList'
import { reactive } from 'vue'
export default {
  components: {
    NavBar,
    HotCategories,
    ScienceArticle,
    ShopList,
    TabBar,
    PageFooter,
  },
  setup() {
    let mainFunction = reactive([
      {
        id: 1,
        url: require('@/assets/home/findMedicine.png'),
        title: '一键找药',
      },
      {
        id: 2,
        url: require('@/assets/home/inquire.png'),
        title: '在线问诊',
      },
      {
        id: 3,
        url: require('@/assets/home/serve.png'),
        title: '服务预约',
      },
    ])
    let minorFunction = reactive([
      { id: 1, url: require('@/assets/home/guide.png'), title: '用药指导' },
      { id: 2, url: require('@/assets/home/otherBuy.png'), title: '药品代购' },
      { id: 3, url: require('@/assets/home/onDoor.png'), title: '送药上门' },
      { id: 4, url: require('@/assets/home/sciEssay.png'), title: '科普文章' },
      { id: 5, url: require('@/assets/home/alliance.png'), title: '药师联盟' },
    ])

    return {
      mainFunction,
      minorFunction,
    }
  },
}
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}

/deep/ .van-nav-bar__title {
  height: 19px;
  line-height: 19px;
  font-size: 19px;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: center;
  color: #000000;
  margin-top: 11.5px;
}
/deep/ .van-nav-bar {
  height: 43px;
}
.top_bg {
  padding: 9.5px  9.5px 0px 9.5px;
  background: linear-gradient(
    180deg,
    #047ffb 0%,
    rgba(255, 255, 255, 0) 591px
  );
  border-radius: 5px;
  .search_box {
    margin-bottom: 13px;
    margin-left:5.5px ;
    width: 345px;
    height: 38px;
    display: flex;
    align-items: center;
    background: #76b9fd;
    border-radius: 10px;
    box-shadow: 0px 5px 15px 0px rgba(177, 205, 253, 0.4);
    img {
      width: 14.5px;
      height: 14.5px;
      margin-left: 19.5px;
      margin-right: 8.5px;
    }
    .top_search {
      width: 302.5px;
      height: 38px;
      border: none;
      background: #76b9fd;
      font-size: 14px;
      border-radius: 10px;
      font-weight: 500;
      text-align: left;
      color: #e7f2fe;
    }
    ::-webkit-input-placeholder {
      color: #e7f2fe;
      font-size: 14px;
      font-weight: 500;
    }
  }

  .function_module {
    background: #ffffff;
    border-radius: 10px;
    padding: 9.5px;
    margin-bottom: 10px;
    .home_banner {
      margin-bottom: 13px;
      img {
        width: 100%;
      }
    }
    .main_function {
      display: flex;
      padding-left:19.5px ;
      padding-right: 20.5px;
      justify-content: space-between;
      .main_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img {
          width: 51px;
          margin-bottom: 6px;
        }
        p {
          width: 60px;
          line-height: 15px;
          font-size: 15px;
          font-weight: 600;
          text-align: center;
          color: #333333;
        }
      }
    }
    .minor_function {
      display: flex;
      justify-content: space-between;
      padding-left: 11.5px;
      padding-right: 13px;
      margin-top: 21.5px;
      margin-bottom: 19px;
      .minor_item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 46px;
          margin-bottom: 6px;
        }
        p {
          height: 12px;
          line-height: 12px;
          font-size: 12px;
          font-weight: 400;
          text-align: center;
          color: #333333;
          transform: scale(.9);
        }
      }
    }
  }
}
</style>
